<template>
	<div class="seller" v-el:sellers>
		<div class="seller-content">
			<div class="overview">
				<h1 class="title">{{seller.name}}</h1>
				<div class="desc border-1px">
					<star :size = "36" :score="seller.score"></star>
					<span class="text">({{seller.ratingCount}})</span>
					<span class="text">月售{{seller.sellCount}}单</span>
				</div>
				<ul class="remark">
					<li class="block">
						<h2>起送价</h2>
						<div class="content">
							<span class="stress">{{seller.minPrice}}</span>
							元
						</div>
					</li>
					<li class="block">
						<h2>商家配送</h2>
						<div class="content">
							<span class="stress">{{seller.deliveryPrice}}</span>
							元
						</div>
					</li>
					<li class="block">
						<h2>平均配送时间</h2>
						<div class="content">
							<span class="stress">{{seller.deliveryTime}}</span>
							分钟
						</div>
					</li>
					
				</ul>
				<div class="favorite"> 
					<span 
					class="iconfont favoIcon"
					:class="{active:favorite}"
					@click="handleFavorClick"
					>&#xe610;</span>
					<span class="favotext">{{favoriteText}}</span>
				</div>
			</div>
			<split></split>
			<div class="bulletin">
				<h1 class="bu-title">
					公告与活动
				</h1>
				<div class="content-wrapper border-1px">
					<p class="bu-content">{{seller.bulletin}}</p>
				</div>
				<ul class="detail-list" v-if="seller.supports">
					<li class="support-item border-1px"							
						v-for = "(index,item) in seller.supports"
						track-by = "$index"
					>
						<span class="detail-icon" :class="newClassName($index)"></span>
						<span class="detail-dtext">{{item.description}}</span>
					</li>
				</ul>
			</div>
			<split></split>
			<div class="pics">
				<h1 class="p-title">商家实景</h1>
				<div class="pic-wrapper" v-el:picw>
					<swiper class="pic-list" 
					:options="swiperOption"
					 v-el:myswiper
					>
						<swiper-slide class="pic-item"
						v-for="pic in seller.pics">
							<img width="120" height="90" :src="pic" />							
						</swiper-slide>
					</swiper>
					
				</div>
			</div>
			<split></split>
			<div class="info">
				<h1 class="info-title border-1px">商家信息</h1>
				<ul>
					<li class="info-item"
					v-for="info in seller.infos">
						{{info}}
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	import Vue from 'vue'
	import Bscroll from 'better-scroll'
	import star from 'components/star/star'
	import split from '../../common/split/split.vue'
	import VueAwesomeSwiper from 'vue-awesome-swiper'
	import 'swiper/dist/css/swiper.css'
	Vue.use(VueAwesomeSwiper)
	export default{
		props:{
			seller:{
				type:Object
			}
		},
		data:function(){
			return {
				className: ['decrease', 'discount', 'guarantee', 'invoice', 'special'],
				notNextTick: true,
				swiperOption:{					
					slidesPerView:this.slideNum,
					observeParents:true,//监听swiper dom结构变化 会刷新
					observer:true,
					setWrapperSize: true,
					spaceBetween: 12,
				},
				winW:0,
				favorite:false
			}
		},
		components:{
			star,
			split
		},
		computed:{
			swiper:function(){
				return this.$els.myswiper.swiper
			},
			slideNum:function(){			
				return this.winW/120;
			},
			favoriteText:function(){
				return this.favorite?'已收藏':'收藏'
			}
			
		},
		methods:{
			newClassName: function(value) {
				return this.className[this.seller.supports[value].type];
			},
			handleFavorClick:function(){
				if(this.onlyContent && !text){
					return false
				}
				this.favorite = !this.favorite;
				try{
					if(localStorage.getItem("favorite")){
						localStorage.setItem("favorite", "")
					}else{
						localStorage.setItem("favorite", this.favorite)
					}
				} catch(e){
					
				}
					
			}
		},
		watch:{
			'seller':function(){
				//console.log("1:"+this.seller)
			}
		},
		created:function(){
			this.favorite = localStorage.getItem("favorite")
		},
		ready:function(){
			//要在dom 挂载完毕以后才能开始操作dom
			if(this.seller.pics){
				this.winW =  this.$els.picw.offsetWidth
				this.swiper.params.slidesPerView = this.slideNum//动态修改属性做到屏幕自适应
				var that = this;
				window.addEventListener('resize', function() {
						this.winW =  this.$els.picw.offsetWidth
						this.swiper.params.slidesPerView = this.slideNum
				}.bind(this),this)
			}
			
			this.swiper.update()
			this.$nextTick(function(){
				if(!this.scroll){					
					this.scroll  = new Bscroll(this.$els.sellers,{
						click:true
					})
				}else{
					this.scroll.refresh()
				}
			})
		}		
	}
</script>

<style lang="stylus" scoped="scoped">
	@import "../../common/stylus/index.styl"
	.seller {
		position: absolute;
		top: 174px;
		bottom: 0px;
		width: 100%;
		left: 0;
		overflow: hidden;
	}
	.overview {
		padding: 18px;
	}
	.title {
		margin-bottom: 8px;
		line-height: 14px;
		color: rgb(7,17,27);
		font-size: 14px;
	}
	.desc {
		padding-bottom: 18px;		
		border-1px(rgba(7,17,27,0.1))
		font-size: 0;
	} 
	.star {
		display: inline-block;
		margin-right: 8px;
		vertical-align: top;
	}
	.text {	
		display: inline-block;
		margin-right: 12px;
		vertical-align: top;
		line-height: 18px;
		font-size: 10px;
		color: rgb(77,85,93);
	}
	.remark {
		display: flex;
		padding-top: 18px;
	}
	.block {
		flex: 1;
		text-align: center;
		border-right: 1px solid rgba(7,17,27,0.1);
	}
	.block:last-child {
		border: none;
	}
	.block h2 {
		margin-bottom: 4px;
		line-height: 10px;
		font-size: 10px;
		color: rgb(147,153,159);
	}
	.content {
		line-height: 24px;
		font-size: 10px;
		color: rgb(7,17,27);
	}
	.stress {
		font-size: 24px;
	}
	.bulletin {
		padding: 18px 18px 0 18px;
	}
	.bu-title {
		margin-bottom: 8px;
		line-height: 14px;
		color: rgb(7,17,27);
		font-size: 14px;
	}
	.content-wrapper {
		padding:0px 16px 12px;
		border-1px(rgba(7,17,27,0.1))
	}
	.bu-content {
		line-height: 24px;
		font-size: 12px;
		color: rgb(240,20,20);
	}
	.support-item {
		padding: 16px 12px;
		font-size: 0;
		border-1px(rgba(7,17,27,0.1))
	}
	.support-item:last-child:after{
		border:none
	}
	.detail-icon {
		display: inline-block;
		width: 16px;
		height: 16px;
		margin-right: 6px;
		background-size:16px 16px ;
		vertical-align: top;
	}
	.detail-icon.decrease{
		bg-image("decrease_4")
	}
	.detail-icon.discount{
		bg-image("discount_4")
	}
	.detail-icon.guarantee{
		bg-image("guarantee_4")
	}
	.detail-icon.invoice{
		bg-image("invoice_4")
	}
	.detail-icon.special{
		bg-image("special_4")
	}
	.detail-dtext {
		line-height: 16px;
		font-size: 12px;
		color:rgb(7,17,27) ;
	}
	.pics {
		padding: 18px;		
	}
	.p-title {
		margin-bottom: 12px;
		line-height: 14px;
		color: rgb(7,17,27);
		font-size: 14px;
	}
	.pic-wrapper {
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
	}
	.pic-list {
		font-size: 0;
	}
	.pic-item {}
	.pic-item:last-child{
		margin: 0;
	}
	.info {
		padding: 18px 18px 0px 18px;
		color: rgb(7,17,27);
	}
	.info-title {
		padding-bottom: 12px;
		line-height: 14px;
		border-1px(rgba(7,17,27,0.1))		
		font-size: 14px;
	}
	.info-item {
		padding: 16px 12px;
		line-height: 16px;
		border-1px(rgba(7,17,27,0.1))
		font-size: 12px;
	}
	.info-item:last-child:after{
		border:none
	}
	.favorite {
		position: absolute;
		width:50px;
		right: 11px;
		top: 18px;
		text-align: center;
	}
	.favoIcon {
		display: block;
		margin-bottom: 4px;		
		line-height: 24px;
		font-size: 24px;
		color: #d4d6d9;
		font-size: 16px;
	}
	.favoIcon.active {
		color: rgb(240,20,20);
	}
	.favotext {
		display: block;
		line-height: 10px;
		font-size: 10px;
		color: rgb(77,85,93);
	}
</style>
